<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!doctype html>
<html>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<jsp:include page="../common/import.jsp" flush="true"></jsp:include>
<body>
<jsp:include page="../common/header.jsp" flush="true"></jsp:include>


<div class="bgfff p20">
	<div class="container clear min-h500 pb100">
        <ul class="clear tc f18 mt20 add-store-ul">
        	<li class="fl lihover">搜索门店</li>
            <li class="fl lihover">填写信息</li>
            <li class="fl lihover">预览并提交</li>
        </ul>
        
        <input type="hidden" id="mcode" name="mcode" value="${mcode}">
        
        <%-- <div class="tc pt50 " id="seccess">
        	<span class="iconfont f100 caac81a">&#xf02a7;</span>
            <p>提交成功。</p>
            <input type="hidden" id="qualificationId" name="qualificationId" value="${qualificationId}">
            <div class="clear mt50">
                <span class="dib w300 tr fb f18 lg40">设备1：</span>
                <input class="h20 lg20 p10 w300" type="text" name="en" placeholder="填写设备SN号" >
                <span class="ce60012 lg40 dib w300">（只有将设备EN号保存后，POS才能打开）</span>
            </div>
            <div ></div>
            <button id="addEnDiv" class="w300 p10 h20 lg20 bgac1 mt30 cfff" onclick="moreEn()"><span class="iconfont f12 mr5">&#xf0175;</span>点击添加更多设备</button>
            
            <div class="tc mt50"><button class="w100 p10 h20 lg20 bga0 mt30 cfff" onclick="bindDevice()">保存</button></div>
        </div>
        
        
         --%>
        
          <div class="tc pt50 none" id="success">
            <span class="iconfont f100 caac81a">&#xf02a7;</span>
            <p>提交成功。</p>
            
            <div class="clear mt50">
                <span class="dib w300 tr fb f18 lg40">设备1：</span><span id="textEn"></span>
                <!-- <input class="h20 lg20 p10 w300" type="text" placeholder="填写设备SN号"> -->
                <span class="ce60012 lg40 dib w300">（只有将设备EN号保存后，POS才能打开）</span>
            </div>
            <button class="w300 p10 h20 lg20 bgac1 mt30 cfff"><span class="iconfont f12 mr5">&#xf0175;</span>点击添加更多设备</button>
            
            <div class="tc mt50"><button class="w100 p10 h20 lg20 bga0 mt30 cfff">保存</button></div>
        </div>

        
        
        
        <div class="tc pt50">
            <span class="iconfont f100 caac81a">&#xf02a7;</span>
            <p>提交成功。</p>
            
            <ul id="en-list" class="mt50">
                <li class="ce60012 lg40">（只有将设备EN号保存后，POS才能打开）</li>
            </ul>
            <button id="add-en" class="w300 p10 h20 lg20 bgac1 mt30 cfff"><span class="iconfont f12 mr5">&#xf0175;</span>点击添加更多设备</button>

            <div id="btn-baocun" class="tc mt50"><button class="w100 p10 h20 lg20 bga0 cfff" onclick="backToMerchant()">完成</button></div>
        </div>
        
        <div class="add-en none">
            <div class="fixed-bg"></div>
            <div class="pa bgfff lg30 clear mt10 add-en-div">
                <p class="mt50 tc f24">绑定设备</p>
                <div class="mt30 clear">
                    <div class="fl w150 tc c000">请输入EN号</div>
                    <input id="input-en" class="h20 p5 w200 fl" type="text" >
                </div>
                <div class="tc pt30 cfff mt30">
                    <button class="bg1eb9ef p5 w100 b-radius" onclick="bindDevice()">保存</button>
                    <button class="bga0 p5 w100 b-radius ml30">取消</button>
                </div>
            </div>
        </div>

        <style type="text/css">
        .add-en>div {z-index: 9;}
        .add-en-div {top: 50%;left: 50%; width: 500px; height: 300px; margin: -150px 0 0 -250px}
        </style>
        
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
         $('#add-en').click(function(){
            $('.add-en').removeClass('none');
        });
        $('.add-en-div button.bga0').click(function(){
            $('.add-en').addClass('none');
        });
        /*
        $('.add-en-div .bg1eb9ef').click(function(){
            if(!$('#input-en').val()){
                $('#input-en').focus();
            }else{
                var str = "<li class='clear mt10 pr100'><span class='dib w100 tr fb f18 lg40'>设备：</span><input class='h20 lg20 p10 w300' type='text' readonly value='"+$('#input-en').val()+"'></li>";
                $('#en-list').append(str);
                $('.add-en').addClass('none');
                if ($('#btn-baocun').hasClass('none')) {$('#btn-baocun').removeClass('none')};
            }
        }); */
        </script>

        
        <div class="tc pt50 none" id="fail">
        	<span class="iconfont f100 cf90">&#xf014e;</span>
            <p>提交失败，网络环境太差。</p>
            
            <div class="tc mt50"><button class="w100 p10 h20 lg20 bgac1 mt30 cfff">返回</button></div>
        </div>
        
    </div>
</div>
<jsp:include page="../common/footer.jsp" flush="true"></jsp:include>
<script type="text/javascript">

//绑定设备
function bindDevice(){
	var en = $("#input-en").val();
	
	//alert(en); 
	var mcode = $("#mcode").val();
	var url = "${base}/agent/device/bindDevice.xhtml";
	var data = {"mcode":mcode,"en":en};
	$.ajax({
			url: url,
			type: "POST",
			data: data,
			dataType: "JSON",
			success: function (data) {
				if (data.status==0) {
					alert(data.info);
					$('.add-en').removeClass('none');
					$('.add-en').addClass('none');
					
					 var str = "<li class='clear mt10 pr100'><span class='dib w100 tr fb f18 lg40'>设备：</span><input class='h20 lg20 p10 w300' type='text' readonly value='"+$('#input-en').val()+"'></li>";
		                $('#en-list').append(str);
		                $('.add-en').addClass('none');
		                if ($('#btn-baocun').hasClass('none')) {$('#btn-baocun').removeClass('none')};
					/*  if(!$('#input-en').val()){
			                $('#input-en').focus();
			            }else{
			                var str = "<li class='clear mt10 pr100'><span class='dib w100 tr fb f18 lg40'>设备：</span><input class='h20 lg20 p10 w300' type='text' readonly value='"+$('#input-en').val()+"'></li>";
			                $('#en-list').append(str);
			                $('.add-en').addClass('none');
			                if ($('#btn-baocun').hasClass('none')) {$('#btn-baocun').removeClass('none')};
			            } */
					
					/* $("#fail").show();
					$("#success").hide(); */
				}
				else{
					alert(data.info);
				}
			},
			error: function (data) {
				//$("#fail").show();
				//$("#success").hide();
				alert('服务端报错' + data.info);
			}
		}); 
}
//点击添加更多
function moreEn(){
	var i = document.getElementsByName("en").length;
	var j = parseInt(i)+1;
	var html ="" ;
	html="<div class='clear mt50'>";
	html="<span class='dib w300 tr fb f18 lg40'>设备"+j+"：</span>";
	html="<input class='h20 lg20 p10 w300' type='text' name='en' placeholder='填写设备SN号' >";
	html=" <span class='ce60012 lg40 dib w300'>（只有将设备SN号保存后，POS才能打开）</span>";
	html="</div>";
	$("#addEnDiv").before(html);
}

function backToMerchant(){
	window.location.href="${base}/agent/merchant/merchantList.xhtml"
}
</script>

</body>
</html>

